<template>
  <div class="bg hasfooter index">
    <div class="top_swiper_wrap">
        <div class="top_swiper">
          <div class="top_swiper_item" v-for="day in days" @click="getByDay(day)" :class="{active: day === queryDay }">
            <span class="dayIcon dayIcon-{{day.getDay() === 0 ? 7 : day.getDay() }}"></span>
            <p>{{day.getDate()}} / {{day | getCHNDay}} </p>
          </div>
        </div>
    </div>
    <div class="selects bgw">
        <div class="selects_inner clear">
            <select v-model="sortSelect[0]" @change="changeSort(0)">
              <option v-for="option in sortType[0]" :value="option.key">
                {{ option.value }}
              </option>
            </select>
            <select v-model="sortSelect[1]" @change="changeSort(1)">
              <option v-for="option in sortType[1]" :value="option.key">
                {{ option.value }}
              </option>
            </select>
            <select v-model="sortSelect[2]" @change="changeSort(2)">
              <option v-for="option in sortType[2]" :value="option.key">
                {{ option.value }}
              </option>
            </select>
            <select v-model="sortSelect[3]" @change="changeSort(3)">
              <option v-for="option in sortType[3]" :value="option.key">
                {{ option.value }}
              </option>
            </select>
        </div>
    </div>
    <p class="action gray bgw" v-if="!user.vip">
        所有课程会员免费，非会员原价。<a class="blue">成为会员&gt;</a>
    </p>
    <div class="lessons">
        <div class="lesson_item clear bgw animated" transition="fade" v-for="item in list">
          <a v-link="{name: 'lesson',query: {id: item.id}}">
            <div class="imgWrap">
              <img v-lazy="item.imgs[0]">
              <p v-if="item.end">已结束</p>
            </div>
            <div class="lesson_info">
              <p class="title">
                <span class="tag tag_1" v-if="item.hot">火</span><span class="tag tag_2" v-if="item.tuijian">荐</span>{{item.title}}
              </p>
              <p class="desc">
                  <i class="icon_1"></i>{{item.address}}
              </p>
              <p class="desc">
                  <i class="icon_2"></i>{{item.time}}
              </p>
            </div>
          </a>
        </div>
    </div>
    <div class="loadingMsg" v-if="isloading">
      加载中...
    </div>
    <p class="bottom-line" v-if="!isloading&&!ismore"><span>{{list.length>0 ? '已经到底了' : '当前没有数据'}}</span></p>
    <div class="loading" v-if="!isloading&&list.length>0&&ismore" @click="nextPage()">
      点击加载更多
    </div>
    <vfooter></vfooter>
  </div>
</template>
<script type="text/babel">
  import {getList, getDays} from '../factory/lessons';

  export default {
    name: 'index',
    components: {
      vfooter: require('../components/vfooter')
    },
    data () {
      return {
        days: [],
        month: null,
        list: [],
        itemWidth: 3 * 7,
        sortSelect: [0, 0, 0, 0],
        queryDay: null,
        pageIndex: 1,
        isloading: true,
        ismore: false,
        user: window.user,
        sortType: {
          /* 时间 */0: [
            {
              key: 0,
              value: '所有时间'
            },
            {
              key: 1,
              value: '早上'
            },
            {
              key: 2,
              value: '下午'
            },
            {
              key: 3,
              value: '晚上'
            }
          ],
          /* 课程 */1: [
            {
              key: 0,
              value: '所有课程'
            },
            {
              key: 1,
              value: '书画课程'
            },
            {
              key: 2,
              value: '国学课程'
            },
            {
              key: 3,
              value: '古琴课程'
            },
            {
              key: 4,
              value: '其他课程'
            }
          ],
          /* 年龄 */2: [
            {
              key: 0,
              value: '全部年龄'
            },
            {
              key: 1,
              value: '0-6岁'
            },
            {
              key: 2,
              value: '6-12岁'
            },
            {
              key: 3,
              value: '12-18岁'
            },
            {
              key: 4,
              value: '永远18岁'
            }
          ],
          /* 排序 */3: [
            {
              key: 0,
              value: '默认排序'
            }
          ]
        }
      };
    },
    created () {
      this.$dispatch('alert.close');
      let that = this;
      let day = getDays();
      that.itemWidth = 3 * day.days.length;
      that.days = day.days;
      that.month = day.month;
      that.queryDay = that.days[0];
      that.nextPage();
    },
    methods: {
      getByDay (day) {
        let that = this;
        that.sortSelect = [0, 0, 0, 0];
        that.queryDay = day;
        that.initQuery();
        that.nextPage();
      },
      changeSort (type) {
        let that = this;
        for (var i = 0; i < that.sortSelect.length; i++) {
          if (i !== type) {
            // that.sortSelect[i] = 0;
          }
        }
        that.initQuery();
        that.nextPage();
      },
      nextPage () {
        let that = this;
        let postParams = {page: this.pageIndex++, size: 5};
        let sortParams = {
          sortTime: that.sortSelect[0],
          sortType: that.sortSelect[1],
          sortAge: that.sortSelect[2],
          sort: that.sortSelect[3]
        };
        Object.assign(postParams, sortParams, {date: that.queryDay.getTime()});
        that.isloading = true;
        getList(postParams).then(function (res) {
          if (!res.iserror) {
            that.list = that.list.concat(res.data.list);
            that.ismore = true;
            if (res.data.count <= that.list.length) {
              that.ismore = false;
            }
          }
          that.isloading = false;
        });
      },
      initQuery () {
        let that = this;
        that.list = [];
        that.pageIndex = 1;
        that.ismore = false;
      }
    }
  };
</script>
